<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商品分类</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="primary"
          sixe="medium"
          @click="dialogFormVisible = true"
          >添加分类</el-button
        >
        <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input v-model="form.cateName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth">
              <el-switch
                v-model="form.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addCate">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <!-- 主要数据 -->
      <div>
        <el-table
          ref="singleTable"
          :data="tableData"
          :style="{ width: w + 'px' }"
        >
          <el-table-column
            type="index"
            label="序号"
            property="id"
            :label-width="formLabelWidth"
          >
          </el-table-column>
          <el-table-column prop="cateName" label="分类名称">
            <template slot-scope="scope">
              <span v-show="scope.row.isEdit === false">{{
                scope.row.cateName
              }}</span>
              <el-input
                v-model="scope.row.cateName"
                v-show="scope.row.isEdit === true"
              ></el-input>
            </template>
          </el-table-column>

          <!-- 作用域插槽 -->
          <el-table-column label="是否启用">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :disabled="scope.row.isEdit == false ? true : false"
              >
              </el-switch>
            </template>
          </el-table-column>

          <!-- 操作 -->
          <el-table-column label="操作" width="180px">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >{{ scope.row.isEdit == false ? "编辑" : "完成" }}</el-button
              >
              <el-button
                size="mini"
                :type="scope.row.isEdit == false ? 'primary' : 'success'"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div>
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[10, 50, 80, 200]"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  goodsCateList,
  goodsDelCate,
  goodsAddCate,
  goodsEditCate,
} from "../../api/goods";
export default {
  data() {
    return {
      currentRow: null,
      currentPage: 1, //当前页
      pageSize: 10, //每条页数
      total: 0,
      rowid: "",
      w: document.body.clientWidth - 300,
      tableData: [],
      dialogFormVisible: false,
      form: {
        cateName: "",
        delivery: false,
        state: true,
        id: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    //点击编辑的时候 修改后台数据

    async handleEdit(index, row) {
      console.log(index, row);
      console.log(row.id);
      row.isEdit = !row.isEdit;
      console.log(row.isEdit);
      
      if(row.isEdit==false){
        let res = await goodsEditCate({
        id: row.id,
        cateName: row.cateName,
        state: row.state,
      });
      console.log(res);
      let {code,msg}=res
      if (code===0) {
        this.$message({
          type: "success",
          message: msg,
        });
      }else{
         this.$message.error(msg);
      } 
      }
    
    },

    //删除一条数据
    handleDelete(index, row) {
      console.log(index, row);
      console.log(row.id);
      this.rowid = row.id;

      this.$confirm("此操作将永久删除该分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(async () => {
          let res = await goodsDelCate({ params: { id: this.rowid } });
          console.log(res);
          let { code, msg } = res;
          if (code === 0) {
            this.$message({
              type: "success",
              message: msg,
            });
            this.CateList();
          } else {
            this.$message.error(msg);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //添加分类
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
      console.log(row);
    },

    //点击确定的时候添加分类
    async addCate() {
      let res = await goodsAddCate({
        cateName: this.form.cateName,
        state: this.form.state,
      });
      console.log(res);
      this.dialogFormVisible = false;
      this.CateList();
    },

    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    resizeHandel() {
      this.w = document.body.clientWidth - 300;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },

    //获取分类列表
    async CateList() {
      let res = await goodsCateList({
        params: { currentPage: this.currentPage, pageSize: this.pageSize },
      });
      console.log(res);
      let { data } = res;
      this.total = res.total;
      //给每一个对象,添加一个是否可以编辑字段 默认值false
      data.forEach((val) => (val.isEdit = false));
      this.state = res.data.state;
      this.tableData = res.data;
    },
  },

  created() {
    //利用resize去得到当前窗口高度
    window.addEventListener("resize", this.resizeHandel);
    this.CateList();
  },
  //销毁
  beforeDestroy() {
    //删除事件
    window.removeEventListener("resize", this.resizeHandel);
  },
};
</script>

<style lang="less" scoped>
.el-button {
  line-height: 26px;
  width: 70px;
}
</style>